<template>
	<view>
		<view class="posiab top0 height800 hidden width1000 posire">
			<view class="height800 hidden ">
				<image mode="" class="image height800" :src="user.user_img?user.user_img:'/static/aaa.png'"></image>
			</view>
			<image mode="widthFix" class="image posiab bottom " src="/static/img/bying.png"></image>
		</view>

		<view class="posire zindex5 ">
			
			
			<view @click="navto('setbg')" class="flex-row pt60 pr50">
				<view @click.stop="navto('settings')">
					<image mode="widthFix" class="image width45" src="/static/img/sheeimg.png"></image>
				</view>
			</view>
			<view @click="navto('setbg')" class="flex-ju-c pt20 colorfff">
				<view class="flex-ju-c flex-col ">
					<view class="posire">

						<image class="wh150-150 ra150 biand" :src="user.avatar?user.avatar:'/static/mo.png'"></image>

						<view class="posiab flex-ju-c bgfff wh55-36 ra36 bottom0 right10">
							<image mode="widthFix" class="image width12" src="/static/img/man.png"></image>
						</view>
					</view>
					<view class="size41 mt20">{{user.nickname}}</view>
					<view class="size20 colorccc mt20 ">ID：{{user.uid}}</view>

					<view class="size25 mt20">

						<textarea @click.stop="" @blur="confirm" confirm-type="done" v-model="textvalue"
							class="colorfff height35px hidden size26 two center" />

					</view>

					<view class="flex-a-i center mt50">
						<view @click.stop="navto('focus?index=2')">
							<view>{{user.care_num}}</view>
							<view>关注</view>
						</view>
						<view @click.stop="navto('focus?index=3')" class="mr50 ml50">
							<view>{{user.fans_num}}</view>
							<view>粉丝</view>
						</view>
						<view @click.stop="$refs.upcang.open()">
							<view>{{user.like_num + user.collect_num}}</view>
							<view>点赞和收藏</view>
						</view>
					</view>
						
					<view class="size25 posire flex mt50    zindex555">
						<view class="mt10">
							网球水平：
						</view>
						<view class="width200 height60"></view>
						<view :class="{kaiactive:iskai}"
							class="posiab zindex1500 top0 height60 hidden ml150  flex-col bg3F3D3B border999 color999 ra30 width200">
							<view @click.stop="gaojis" class="height60 width200 flex-ju-c colorfff center  border-b999">
								{{indexping}}

								<uni-icons type="bottom" size="13" class="ml5" color="#CCCCCC"></uni-icons>
							</view>

							<view @click.stop="setping(item,m)" v-for="(item,m) in ping" :key="m"
								class="height60 flex-ju-c">{{item}}</view>

						</view>
					</view>
				</view>
			</view>


			<view class="bgfff brd mt50 height100 flex-ju-c">
				<view class="flex-a-i bold color999 center">
					<view @click="hometab(1)" :class="{activetxt:tindex==1}" class="">
						笔记
						<view :class="{active:tindex==1}" class="ra7 bgfff wh70-7 mt5"></view>
					</view>
					<view @click="hometab(2)" :class="{activetxt:tindex==2}" class="ml30">
						收藏
						<view :class="{active:tindex==2}" class="ra7 bgfff wh70-7 mt5"></view>
					</view>
					<view @click="hometab(3)" :class="{activetxt:tindex==3}" class="ml30">
						赞过
						<view :class="{active:tindex==3}" class="ra7 bgfff wh70-7 mt5"></view>
					</view>
				</view>
			</view>

			<view class="bgfff ra10 ml15 mr15 mt10  ">
				<view v-for="(item,index) in allids" :jey="index" class="flex-ju-b height120"
					style="width: 95%;margin: auto;">
					<template v-if="item.status == '0'">
						<view class="flex-a-i">
							<video autoplay muted :controls="false" class="wh75-75 image mr10"
								:src="item.oss_path"></video>
							<!-- <video object-fit="fill" :show-loading="false" :controls="false" :show-center-play-btn="false" :show-play-btn="false" :show-fullscreen-btn="false" class="wh75-75 image mr10" :src="item.video"></video> -->
							<view>
								<view class="color333 bold">视频正在解析中....</view>
								<view class="size22 mt5 color666">请耐心等待哟，解析完毕后即可发布笔记啦~</view>
							</view>
						</view>
						<view class="size22 wh100-40 border999 flex-ju-c ra50 color999">去发布</view>
					</template>
					<template v-else-if="item.status == '1'">
						<view class="flex-a-i">
							<!-- <video object-fit="fill" :show-loading="false" :controls="false" :show-center-play-btn="false" :show-play-btn="false" :show-fullscreen-btn="false" class="wh75-75 image mr10" :src="item.video"></video> -->
							<video autoplay muted :controls="false" class="wh75-75 image mr10"
								:src="item.oss_path"></video>
							<view>
								<view class="color333 bold">视频已解析完毕</view>
								<view class="size22 mt5 color666">快去发布笔记吧~</view>
							</view>
						</view>
						<view class="flex-a-i">
							<view @click="delvode(item,index)"
								class="size22 wh100-40 bordercb79a6  flex-ju-c ra50 colorcb79a6">删除</view>
							<view @click="xiazai(item)"
								class="size22 wh100-40 ml15 border27A752 flex-ju-c ra50 color27A752">下载</view>
							<view @click="gofabu(item)"
								class="size22 wh100-40 ml15 border27A752 flex-ju-c ra50 color27A752">发布</view>
						</view>

					</template>
					<template v-else>
						<view class="flex-a-i">
							<video autoplay muted :controls="false" class="wh75-75 image mr10"
								:src="item.oss_path"></video>
							<!-- <video object-fit="fill" :show-loading="false" :controls="false" :show-center-play-btn="false" :show-play-btn="false" :show-fullscreen-btn="false" class="wh75-75 image mr10" :src="item.video"></video> -->
							<view>
								<view class="color333 bold">视频错误</view>
								<view class="size22 mt5 color666">请重新上传~</view>
							</view>
						</view>
						<view @click="delvode(item,index)" class="size22 wh100-40 bordercb79a6 flex-ju-c ra50 colorcb79a6">删除
						</view>
					</template>

				</view>

			</view>

			<view class="pb15 pl10 pr10 ">
				<nodata v-if="isdata"></nodata>
				<view class="flex" style="justify-content: space-between;">
					<view>
						<!-- <cover-view class="bgred wh500-5000 posiab top0 zindex999"></cover-view> -->
						<view class="bgfff width48vw  mt15 pb15 " v-for="(item,index) in listleft" :key="index">
							<view @click="navto('/pages/index/detail?id='+item.id)" class="posire">
								<!-- 	<image mode="widthFix" v-if="item.imgs[0].path.endsWith('.mp4')"
								class="width40 posiab image right15 top15" src="/static/img/bo.png"></image> -->

								<video mode="widthFix" v-if="item.imgs[0].path.endsWith('.mp4')"
									class="width1000 height350 image" muted autoplay show-fullscreen-btn="false"
									controls="false" :src="item.imgs[0].path">
									
									<cover-view @click="navto('/pages/index/detail?id='+item.id)" style="height: 100%;"
										class="zindex15">
									</cover-view>
									
									</video>

								<image mode="widthFix" v-else class="width1000 image" :src="item.imgs[0].path"></image>


							<!-- 	<cover-view @click="navto('/pages/index/detail?id='+item.id)" style="height: 100%;"
									class="width1000   posiab top0 zindex15">

								</cover-view> -->


							</view>

							<view class="con ">
								<view class="two  size29 bold mt15 mb15">{{item.title}}</view>
								<view class="flex-ju-b color666 size22">
									<view class="flex-a-i" v-if="item.user">
										<image mode="aspectFill" class="wh35-35 ra35 flex mr10"
											:src="item.user.avatar?item.user.avatar:'/static/mo.png'"></image>
										{{item.user.nickname}}
									</view>
									<view @click="setlike(item)" class="flex-a-i">
										<uni-icons v-if="item.is_like" type="heart-filled" color="#FF1E00"
											size="17"></uni-icons>
										<uni-icons v-else type="heart" color="#333" size="17"></uni-icons>
										{{item.like_count}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view>
						<view class="bgfff width48vw  mt15 pb15 posire" v-for="(item,indexs) in listright"
							:key="indexs">
							<view @click="navto('/pages/index/detail?id='+item.id)" class="posire">
								<!-- 	<image mode="widthFix" v-if="item.imgs[0].path.endsWith('.mp4')"
								class="width40 posiab image right15 top15" src="/static/img/bo.png"></image> -->

								<video mode="widthFix" v-if="item.imgs[0].path.endsWith('.mp4')"
									class="width1000 height350 image" muted autoplay show-fullscreen-btn="false"
									controls="false" :src="item.imgs[0].path">
									<cover-view @click="navto('/pages/index/detail?id='+item.id)" style="height: 100%;"
										class="zindex15">
									</cover-view>
									</video>

								<image mode="widthFix" v-else class="width1000 image" :src="item.imgs[0].path"></image>


								<!-- <cover-view @click="navto('/pages/index/detail?id='+item.id)" style="height: 100%;"
									class="width1000   posiab top0 zindex15">

								</cover-view> -->


							</view>

							<view class="con ">
								<view class="two  size29 bold mt15 mb15">{{item.title}}</view>
								<view class="flex-ju-b color666 size22">
									<view class="flex-a-i" v-if="item.user">
										<image mode="aspectFill" class="wh35-35 ra35 flex mr10"
											:src="item.user.avatar?item.user.avatar:'/static/mo.png'"></image>
										{{item.user.nickname}}
									</view>
									<view @click="setlike(item)" class="flex-a-i">
										<uni-icons v-if="item.is_like" type="heart-filled" color="#FF1E00"
											size="17"></uni-icons>
										<uni-icons v-else type="heart" color="#333" size="17"></uni-icons>
										{{item.like_count}}
									</view>
								</view>
							</view>
						</view>



						<!-- <view @click="navto('/pages/index/detail?id='+item.id)"
							class="bgfff width48vw  mt15 pb15 posire" v-for="(item,g) in listright" :key="g">
							<image mode="widthFix" v-if="item.imgs[0].path.endsWith('.mp4')"
								class="width40 posiab image right15 top15" src="/static/img/bo.png">
							</image>
							<video mode="widthFix" :controls="false" 
								v-if="item.imgs[0].path.endsWith('.mp4')" class="width1000 height350 image"
								:src="item.imgs[0].path"></video>
							<image mode="widthFix" v-else class="width1000 image" :src="item.imgs[0].path"></image>
							<view class="con ">
								<view class="two  size29 bold mt15 mb15">{{item.title}}</view>
								<view class="flex-ju-b color666 size22">
									<view class="flex-a-i">
										<image mode="aspectFill" class="wh35-35 ra35 flex mr10"
											:src="item.user.avatar?item.user.avatar:'/static/mo.png'"></image>
										{{item.user.nickname}}
									</view>
									<view @click="setlike(item)" class="flex-a-i">
										<uni-icons v-if="item.is_like" type="heart-filled" color="#FF1E00"
											size="17"></uni-icons>
										<uni-icons v-else type="heart" color="#333"
											size="17"></uni-icons>{{item.like_count}}
									</view>
								</view>
							</view>
						</view>
				 -->
					</view>
				</view>
				
			</view>

		</view>
	</view>
	<uni-popup type="center" ref="upcang">
		<view class="bgfff ra20 width480">
			<view class="flex-ju-c flex-col color333 pb30">
				<view class="size34 flex-ju-c bold mt30 pb20 border-bEDEDED width480">获赞和收藏</view>
				<view class="border-bEDEDED pb20">
					<view class="color999  size26 mt20">当前发布笔记数</view>
					<view class="size29 center bold mt10  ">{{user.post_num}}</view>
				</view>
				<view class="border-bEDEDED pb20">
					<view class="color999  size26 mt20">当前获得点赞数</view>
					<view class="size29 center bold mt10  ">{{user.like_num}}</view>
				</view>
				<view class="border-bEDEDED pb20">
					<view class="color999  size26 mt20">当前获得收藏数</view>
					<view class="size29 center bold mt10  ">{{user.collect_num}}</view>
				</view>
				<view @click="$refs.upcang.close()" class="wh350-76 flex-ju-c ra76 bold size29 ibgto-27A752-C6FF00">确认
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		data() {
			return {
				isdata: false,
				textvalue: "",
				ping: ['精英阶段', '高级阶段', '中级阶段', '初级阶段'],
				indexping: "",
				tindex: 1,
				ids: [],
				iskai: false,
				user: '',
				listleft: [],
				listright: [],
				page: 1,
				jiexi: [],
				allids: []
			}
		},
		onLoad() {

		},
		onShow() {
		 
			this.http('/api/userinfo').then(res => {
				this.user = res.data
				if (res.data.level == 1) {
					this.indexping = '初级阶段'
				} else if (res.data.level == 2) {
					this.indexping = '中级阶段'
				} else if (res.data.level == 3) {
					this.indexping = '高级阶段'
				} else {
					this.indexping = '精英阶段'
				}
				this.textvalue = res.data.mark ? res.data.mark : '点击填写简介，让更多人了解你吧~'
				uni.setStorageSync('user', res.data)
			})
			this.listleft = []
			this.listright = []
			this.page = 1
			this.tindex = 1
			this.getlist(1)

			// console.log(this.ids,111)
			// this.remove('57953f5f-ce00-4a67-99d3-21b5bc2bdc71')

			// console.log(this.ids,222)
			// uni.setStorageSync('task_id',this.ids)


			this.http('/api/video_list').then(res => {
				this.allids = res.data.list
			})

			// this.ids = uni.getStorageSync('task_id')

			// if (this.ids && this.ids.length) {


			// 	this.jiexi = []
			// 	this.ids.map(item => {
			// 		this.gettaskid(item)
			// 	})
			// }
		},
		onReachBottom() {
			this.page++
			this.getlist(this.tindex)
		},
		methods: {
			xiazai(item) {
				uni.showLoading({
					title: "正在保存"
				})
				uni.downloadFile({
					url: this.videoURL + 'download_video/?file_path=out/' + item.task_id + '.mp4',
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveVideoToPhotosAlbum({
								filePath: res.tempFilePath,
								success: res => {
									uni.hideLoading()
									uni.showToast({
										title: "保存成功",
										icon: "none"
									})
								},
								fail: (res) => {
									uni.hideLoading()
									uni.showModal({
										content: JSON.stringify(res),
										showCancel: false
									})
								}
							})
						}
					},
					fail(vv) {
						console.log(vv, "hhh")
					}

				})
			},
			gofabu(item) {
				this.navto('/pages/capture/publish?video=' + item.id + '&yuanvideo=' + item.video)
			},
			delvode(items,index) {
				this.http('/api/remove_video/'+items.id).then(res=>{
					this.allids.splice(index,1)
				})
			},
			gettaskid(item) {
				this.http('/api/get_take_status', {
					task_id: item.id
				}).then(res => {
					this.ids.map(items => {
						if (items.id == item.id) {
							items.status = res.data.status
						}
					})
					this.allids = this.ids
					console.log('不不不', this.allids)
				})
			},

			indexof(val) {
				for (var i = 0; i < this.ids.length; i++) {
					if (this.ids[i] == val) return i;
				}
				return -1;
			},
			remove(val) {
				var index = this.indexof(val);
				if (index > -1) {
					this.ids.splice(index, 1);
				}
			},
			setlike(item) {
				if (item.is_like) {
					this.http('/api/lose_like/' + item.id, {}, 'post').then(res => {
						item.is_like = false
						item.like_count--
					})
				} else {
					this.http('/api/post_like/' + item.id, {}, 'post').then(res => {
						item.is_like = true
						item.like_count++
					})

				}
			},
			getlist(type) {
				this.http('/api/note_list', {
					type,
					page: this.page,
					limit: 20
				}).then(res => {
					res.data.list.map((item, index) => {
						if (index % 2) {
							this.listright.push(item)
						} else {
							this.listleft.push(item)
						}
					})
					if (this.listleft.length) {
						this.isdata = false
					} else {
						this.isdata = true
					}
				})
			},
			confirm() {
				this.http('/api/user/edit', {
					mark: this.textvalue
				}, 'post').then(ress => {

				})
			},
			setping(item, index) {
				var level
				if (index == 0) {
					level = 4
				} else if (index == 1) {
					level = 3
				} else if (index == 2) {
					level = 2
				} else {
					level = 1
				}
				this.http('/api/user/edit', {
					level
				}, 'post').then(ress => {
					this.indexping = item
					this.iskai = !this.iskai
				})
			},
			gaojis() {
				this.iskai = !this.iskai

			},
			hometab(index) {
				this.tindex = index
				this.listright = []
				this.listleft = []
				this.page = 1
				this.getlist(index)
			}
		}
	}
</script>

<style>
	page {
		background: #F6F7F8;
	}

	.biand {
		border: 2px solid #fff;
	}

	.brd {
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
	}

	.active {
		background: #27A752;
	}

	.activetxt {
		color: #333;
	}

	.kaiactive {
		height: auto;
	}
</style>